<template>
  <div>
    <!--    <el-button @click="clickHandler">showDialog</el-button>-->
    <ftp-upper></ftp-upper>
<!--    <image-container
      :ip="imageContainHolderInfo.ip"
      :port="imageContainHolderInfo.port"
      :prefix="imageContainHolderInfo.prefix"
      :filenames="imageContainHolderInfo.filenames"
    ></image-container>-->
<!--    <file-ext></file-ext>-->
  </div>
</template>

<script lang="ts">
import ImageContainer from "./ImageContainer.vue";
import { reactive } from "vue";
import type { ListingElement } from "ftp";
import FtpUpper from "./FtpUpper.vue";
const Client = require("ftp");
export default {
  name: "MainContainer",
  components: { FtpUpper, ImageContainer },
  setup() {
    const imageContainHolderInfo = reactive({
      ip: "119.23.182.180",
      port: "10003",
      prefix: "novalai",
      filenames: new Array<String>(),
    });

    let c = new Client();
    c.connect({
      host: "server.masaikk.xyz",
      user: "b8313",
      password: "b8313",
    });
    c.on("ready", () => {
      c.list(
        imageContainHolderInfo.prefix,
        (err: Error, listing: ListingElement[]) => {
          // prefix
          if (err) throw err;
          // console.log(listing);
          listing.forEach((value) => {
            imageContainHolderInfo.filenames.push(value.name);
          });
        }
      );
    });

    return { imageContainHolderInfo };
  },
};
</script>

<style scoped></style>
